<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Report</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class="ibox-title" style="border: none;">
                              <h5 style="color: #00afef"><i>Arrear Count by Customer</i></h5>
                            </div>
                           <div class="table-responsive">
                             <form id="search_arears">
                               <div class="form-group" id="count-select">
                                    <label style="text-align: right;" class="col-lg-4 control-label">Arear's Count From</label>
                                    <div class="col-lg-3 input-daterange input-group">
                                        <select name="one" class="form-control">
                                          <?php for($i = 1; $i <= 10;$i++): ?>
                                            <option value="<?php echo $i ?>"><?php echo $i ?></option>
                                          <?php endfor; ?>
                                        </select>
                                        <span class="input-group-addon">&nbsp;To&nbsp;</span>
                                       <select name="two" class="form-control">
                                          <?php for($i = 1; $i <= 10;$i++): ?>
                                            <option value="<?php echo $i ?>" <?php echo $i == '10' ? 'selected' : '' ?>><?php echo $i ?></option>
                                          <?php endfor; ?>
                                       </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label style="text-align: right;" class="col-lg-4 control-label">Search for:</label>
                                    <div class="col-lg-3 input-daterange input-group">
                                        <select name="disconnection" class="form-control">
                                            <option value=""></option>
                                            <option value="DIS">Disconnection</option>
                                        </select>
                                    </div>
                                </div>
                                 <?php foreach ($zone1 as $key): ?>
                                <div class="form-group" style="display: <?php echo ($key->enable_flag == 'N' ? 'none' : ''); ?>">
                                        <label style="text-align: right;" class="col-lg-4 control-label"><?php echo $key->field_label; ?></label>
                                    <?php endforeach;?>
                                    <div class="col-lg-3 input-daterange input-group">
                                        <select name="areas" class="form-control">
                                            <option value="ALL">All</option>
                                            <?php foreach($zones as $z): ?>
                                            <option value="<?php echo $z->zone_name; ?>"><?php echo $z->zone_name; ?></option>
                                          <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label style="text-align: right;" class="col-lg-4 control-label"></label>
                                    <div class="col-lg-3 input-daterange input-group">
                                        <button class="btn btn-primary btn-outline btn-block btn-md m-t-n-xs" id="get-count" type="button"><i class="fa fa-check fa-fw"></i> Get List</button>
                                    </div>
                                </div>
                             </form>
                           </div>
                          </br>
                             <div id="result" style="display: none;">
                               <div class="ibox-content">
                                  <div class="row">
                                      <div class="col-xs-9">
                                      <div class="btn-group">
                                        <a id="to_pdf" href="#" class="btn btn-link" ><i class="fa fa-file-pdf-o fa-fw"></i> <small>Export as PDF</small></a>
                                        <a id="to_excel" href="#" class="btn btn-link" ><i class="fa fa-file-excel-o fa-fw"></i> <small>Export as Excel</small></a>
                                       <!--  <button id="to_mail" class="btn btn-link" ><i class="fa fa-envelope-o fa-fw"></i> <small>Send to Email</small></button> -->
                                    </div>
                                       <!--  <div class="col-xs-3">
                                          <a id="to_pdf" class="btn btn-w-m btn-outline btn-link" href="#"><i class="fa fa-file-pdf-o fa-fw"></i> <small>Export as PDF</small></a>
                                        </div>
                                        <div class="col-xs-3">
                                          <a id="to_excel" class="btn btn-w-m btn-outline btn-link" href='#'><i class="fa fa-file-excel-o fa-fw"></i> <small>Export as Excel</small></a>
                                        </div>
                                        <div class="col-xs-3">
                                          <div class="">
                                              <button class="btn btn-w-m btn-outline btn-link dropdown-toggle" id="to_mail"><i class="fa fa-envelope-o fa-fw"></i> <small>Send to Email</small></button>
                                          </div>
                                        </div> -->
                                      </div>
                                  </div>
                               </div><!-- END OF IBOX CONTENT -->
                              <table class="dataTable table table-striped table-hover" style="width:100%;">
                                <thead>
                                  <tr>
                                    <th data-type="alpha">Area</th>
                                    <th data-type="" class="dt-body-right">Account Number</th>
                                    <th data-type="alpha">Account Name</th>
                                    <th data-type="alpha" class="dt-body-right">Arear Count</th>
                                  </tr>
                                </thead>
                                <tbody id="arear_table">
                                </tbody>
                              </table>
                              </div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
    </div><!-- END of class row -->
</div>
<script>
      $(document).ready(function(){
        $('#search_arears').keydown(function (e) {
          if (e.which == 13) {
            $('#get-count').trigger('click');
            return false;
          }
        });

       $('select[name=disconnection]').change(function(){
        console.log($(this).val());
          if($(this).val() == "DIS"){
            $('#count-select').find('select').attr('disabled',true);
          }else{
            $('#count-select').find('select').removeAttr('disabled');
          }
       });

        $(document).on('click','.open_arear',function(){
          console.log($(this).attr('id'));
          var title = 'Arear List';
          var url = '<?php echo base_url($this->session->userdata('forajax')); ?>/get_pend?id='+$(this).attr('id');
          window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no');
        });
         var table = $('.dataTable').DataTable({
              "dom": 'tip',
              "iDisplayLength": 50,
              "columnDefs": [
                { className: "text-right", "targets": [3,3],
                  className: "text-right", "targets": [1,3] },
              ]
          });
        $('#get-count').click(function(){
          $.ajax({
            url: "<?php echo base_url($this->session->userdata('forajax')); ?>/get_status",
            type: 'POST',
            dataType: 'json',
            data: $('#search_arears').serialize(),
            success: function(data){
              $('#get-bill').removeAttr('disabled');
              console.log(data);
              if(data.length == 0){
                 $('#arear_table').html('<tr><td colspan="10" align="center">No Result</td></tr>');
                 $('#to_excel').hide();
                 $('#to_pdf').hide();
                 $('#to_mail').hide();
              }else{
                var tmp = '';
                $.each(data,function(i,item){
                 // var links = '<button class="btn btn-link" style=" padding: 0px;" id="'+data[i].num+'">'+data[i].a_count ]+'</button>';
                  table.row.add( [ data[i].area , data[i].num, data[i].name,'<span style="display:none;">'+data[i].a_count+'</span><a class="btn btn-link open_arear" style=" padding: 0px;color: #1ab7f0;" id="'+data[i].num+'">'+data[i].a_count +'</a>' ]);
                });
                $('.progress').css('display','none');
                table.draw();
               //$('#arear_table').html(tmp); //$('#bill_table').html(tmp).trigger('footable_redraw');
                $('#to_excel').attr('href','<?php echo base_url($this->session->userdata("forajax")); ?>/gen_excel?disconnection='+$('select[name=disconnection]').val()+'&one='+$('select[name=one]').val()+'&two='+$('select[name=two]').val()+'&areas='+$('select[name=areas]').val());
                $('#to_pdf').attr('href','<?php echo base_url($this->session->userdata("forajax")); ?>/gen_pdf?disconnection='+$('select[name=disconnection]').val()+'&one='+$('select[name=one]').val()+'&two='+$('select[name=two]').val()+'&areas='+$('select[name=areas]').val());
                  $('#to_excel').show();
                  $('#to_pdf').show();
                //$('#to_mail').show();
              }
              $('#result').show();
            },
            beforeSend: function(){
              $('#get-count').attr('disabled',true);
              $('#result').hide();
              table.rows().clear();
            },
            complete: function(){
               $('#get-count').removeAttr('disabled');
               $('#result').show();
            }
          });
        });
      });
</script>